<template>
<div>
    <div class="search-header">
        <div class="search-input" data-v-1276c9ec="">
            <div class="search-input-container" data-v-1276c9ec="" data-v-c9b7d6c2=""
            ><div class="flex_center" data-v-c9b7d6c2="">
                <svg style="display:none;" class="search-logo p_center_y" data-v-c9b7d6c2="">
                    <use xlink:href="#logo"></use>
                </svg>
                <div class="search-input-wrap flex_between" data-v-c9b7d6c2="">
                    <svg class="search-icon" data-v-c9b7d6c2="">
                        <use xlink:href="#header-search">

                        </use>
                    </svg>
                    <svg style="" class="clear-icon" data-v-c9b7d6c2="">
                        <use xlink:href="#close2"></use>
                    </svg>
                    <input value="sgdf" class="search-input-el" type="text" placeholder="输入关键字搜索" data-v-c9b7d6c2="">
                    <button class="vui_button vui_button--blue vui_button--lg search-button" data-v-c9b7d6c2="">搜索</button><div data-v-c9b7d6c2="" class="search-panel search-panel-popover" style="display: none;"><!----><!----><div class="suggestions"><div class="suggest-item" tabindex="0"><em class="suggest_high_light">sgdf</em></div><div class="suggest-item" tabindex="0">砂锅豆腐</div><div class="suggest-item" tabindex="0">闪光的弗莱士</div><div class="suggest-item" tabindex="0">水果大福</div><div class="suggest-item" tabindex="0">四国大封相</div><div class="suggest-item" tabindex="0">神龟刀锋</div><div class="suggest-item" tabindex="0">石锅豆腐</div><div class="suggest-item" tabindex="0">三国大富翁</div><div class="suggest-item" tabindex="0">是甘的法官阁下</div><div class="suggest-item" tabindex="0">石膏豆腐</div></div></div></div></div></div></div>
    </div>
    <div class="search-content">
        <div class="video-container">
            <videoCard v-for="(video,index) in videos"
            :key="index"
            :video="video"
            ></videoCard>
        </div>
        <div class="pages-selector">
            <div v-if="moreThanFive" class="morethanfive">
                <button v-for="page in pages" >
                {{ page }}
            </button>
            <span>......</span>
            <button>{{ pages }}</button>
            </div>
            <div class="lessThanFive">
                <button v-for="page in pages" >
                {{ page }}
            </button>
            </div>

        </div>
    </div>
</div>
</template>
<script>
import videoCard from '@/components/videoCard.vue';
import { store } from '@/js/store';
export default{
    data(){
        return{
            videos:[{
            id:1,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image3.png"
        },{
            id:"d7e72278-cbc7-4012-8143-e24f5ed67982",
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image.png"
        }],
            store,
            pages:3
        }
    },
    created(){
        this.getTheSearchVideo(store.searchContent);
    },
    methods:{
        getTheSearchVideo(content){
           
        }
    },
    components:{
        videoCard
    }
}
</script>
<style scoped>
.search-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.video-container{
    gap: 50px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.pages-selector{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    gap: 5px;
} 

</style>